<template>
	<view class="m-xg-player" ref="xgFarther" @touchstart="handleTouchStart" @touchend="handleTouchEnd"
		@longpress="handleLongpress">
		<!-- :change:palyText="xgplayerModule.play" -->
		<view :id="storyId" :storyId="storyId" :storyUrl="storyUrl" :palyText="palyText" :pauseText="pauseText"
			:seekTime="seekTime" :rate="rate" :contorlMuted="contorlMuted" :change:seekTime="xgplayerModule.seek"
			:muted="muted" :change:contorlMuted="xgplayerModule.handleChangeMuted"
			:change:muted="xgplayerModule.handleChangeMuted" :change:pauseText="xgplayerModule.pause"
			:change:palyText="xgplayerModule.play" :change:storyId="xgplayerModule.handleGetStoryId"
			:change:storyUrl="xgplayerModule.handleGetStoryUrl" :change:rate="xgplayerModule.playbackRate"
			:data-story-url="storyUrl" class="xg-content"></view>
		<view class="control-masker" @click.stop="hangleTestClick">

			<slot name="vidoeContent">

			</slot>

		</view>
	</view>
</template>



<script>
	export default {
		props: {
			storyId: {
				type: String,
				default: ""
			},
			storyUrl: {
				type: String,
				default: ""
			},
			autoplay: {
				type: [Boolean, Object],
				default: null
			},
			muted: {
				type: [Boolean, Object],
				default: null
			},
			testData: {
				type: String,
				default: "你好"
			}
		},
		data() {
			return {
				show: true,
				palyText: "",
				pauseText: "",
				rate: 0,
				seekTime: null,
				contorlMuted: null,


			}
		},
		computed: {

		},
		mounted() {},
		methods: {
			hangleTestClick() {
				// this.contorlMuted = !this.contorlMuted
			},

			handleLongpress(e) {
				this.$emit("longpress", e)
			},
			handleTouchEnd(e) {
				this.$emit("touchend", e)
			},
			handleTouchStart(e) {
				// console.log("触发touch");
				this.$emit('touchstart', e)
			},
			handleTestClick() {},
			handlePlayNow() {
				this.$emit('play', {
					storyId: this.storyId
				})
			},
			handlePauseNow() {
				this.$emit('pause')
			},
			handleEndedNow() {
				this.$emit('ended')
			},
			handleErrorNow(e) {
				this.$emit('ended', e)
			},
			handleTimeUpdate(e) {
				try {
					let obj = {
						detail: {
							...e,
							storyId: this.storyId
						}
					}
					this.$emit('timeupdate', obj)
				} catch (b) {}

			},

			handleSeeking() {
				this.$emit('seeking')
			},
			handleSeeked() {
				this.$emit('seeked')
			},
			handleCanplayNow() {
				if (this.autoplay) {
					this.play()
				}
				if (this.muted) {
					this.contorlMuted = true
				}
				this.$emit('canplay')
			},

			handleLoadeddata(e) {
				this.$emit('loadeddata', e)
			},
			play() {
				let time = new Date().getTime()
				this.palyText = time

			},
			playbackRate(rate) {
				this.rate = rate
			},
			pause() {
				let time = new Date().getTime()
				this.pauseText = time
			},
			seek(time) {
				// this.seekTime = new Date().getTime()
				this.seekTime = {
					time,
					dateTime: new Date().getTime()
				}
			}

		}
	}
</script>




<script module="xgplayerModule" lang="renderjs">
	// 视图层
	import 'xgplayer/dist/index.min.css';
	import xgPlayers from 'xgplayer'
	export default {
		data() {
			return {
				player: null,
				rateList: [0.5, 0.75, 1, 1.5, 2],
				storyId: "",
				storyUrl: "",
				autoplay: false,
				muted: false,
				canplayIsEmit: false,
			}
		},
		mounted() {
			this.initPlayer()
		},
		beforeDestroy() {
			this.clearEvents()
		},
		methods: {
			handleChangeMuted(e) {
				if (e !== null) {
					this.muted = e
					if (this.player) {
						this.player.muted = e
					}
				}
			},

			handleGetStoryUrl(e) {
				this.storyUrl = e
			},
			handleGetStoryId(e) {
				this.storyId = e
			},
			handleTest(newValue, oldValue, ownerInstance, instance) {},
			initPlayer() {

				let autoplay = this.autoplay
				let muted = this.muted
				this.player = new xgPlayers({
					id: this.storyId,
					url: this.storyUrl,
					lang: "zh-cn",
					playbackRate: [0.5, 0.75, 1, 1.5, 2],
					height: "100vh",
					width: "100vw",
					// autoplay: autoplay,
					// autoplayMuted: muted,
					// defaultMuted: true,
					videoInit: true,
					controls: false,
					poster: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bf7d7a49911940de84483ce4db89da14.png",
					ignores: ['time', 'definition', 'error', 'fullscreen', 'i18n', 'loading', 'mobile', 'pc',
						'play', 'poster', 'progress', 'replay', 'volume', 'start'
					],
					'x5-video-player-type': 'h5',
					"x5-video-player-fullscreen": true,
					'x5-video-orientation': 'portraint'

				});

				this.player.on("play", () => {
					UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
						cid: this._$id,
						method: 'handlePlayNow',
						args: {}

					})
				})
				this.player.on("pause", () => {
					UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
						cid: this._$id,
						method: 'handlePauseNow',
						args: {}
					})
				})
				this.player.on("ended", () => {
					UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
						cid: this._$id,
						method: 'handleEndedNow',
						args: {}
					})

				})
				this.player.on("error", () => {
					UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
						cid: this._$id,
						method: 'handleErrorNow',
						args: {
							msg: "播放出错了"
						}
					})
				})

				this.player.on("canplay", () => {
					// 由于每次seek都会有canplay事件触发，所以当前只允许抛出一次，避免重复多次执行预加载逻辑
					if (!this.canplayIsEmit) {
						UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
							cid: this._$id,
							method: 'handleCanplayNow',
							args: {}
						})
						this.canplayIsEmit = true
					}

				})
				this.player.on("seeking", () => {
					UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
						cid: this._$id,
						method: 'handleSeeking',
						args: {}

					})
				})
				this.player.on("seeked", () => {
					UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
						cid: this._$id,
						method: 'handleSeeked',
						args: {}

					})
				})
				this.player.on("timeupdate", (e) => {
					UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
						cid: this._$id,
						method: 'handleTimeUpdate',
						args: {
							'currentTime': e.currentTime,
							"duration": e.duration
						}

					})


				})
				this.player.on("loadeddata", (e) => {
					UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
						cid: this._$id,
						method: 'handleLoadeddata',
						args: {}

					})
				})

				this.player.on("loadeddata", (e) => {
					UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
						cid: this._$id,
						method: 'handleLoadeddata',
						args: {}
					})
				})
			},
			clearEvents() {},
			play(e) {
				if (e) {
					this.player.play()
				}
			},
			pause(e) {
				if (e) {
					this.player.pause()
				}
			},
			seek(e) {
				if (e != null) {
					this.player.seek(e.time)
				}
			},
			playbackRate(e) {
				if (this.rateList.includes(e)) {
					this.player.playbackRate = e
				}
			}
		}
	}
</script>





<style lang="scss" scoped>
	.m-xg-player {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		z-index: 1;

		.xg-content {
			position: absolute;
			display: flex;
			justify-content: center;
			z-index: 1;
		}

		.control-masker {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			z-index: 2;
		}

		.testRact {
			// 
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			width: 50vw;
			height: 50vh;
			background-color: pink;
		}
	}
</style>